<template>
    <div class="box">
        <!-- 添加商品 -->
        <div class="addgood" @click="$router.push('/addgoods')"  style="right:5px;text-align: center;">
          添加
        </div>
        <!-- 搜索 -->
        <form >
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" :clearable='true' @clear = "onCancel"/>
        </form>
        <!-- 搜索历史 、 -->
        <div class="search" v-show="show">
            <span>搜索历史</span>
            <van-icon name="delete" @click="removaLocal"/>
            <div style="padding:5px 10px;">
                <van-tag v-for="(item,index) in historysearch" :key="index" @click="setValue(item)">{{item}}</van-tag>
                <van-divider style="border-color: rgb(25, 137, 250); color: rgb(25, 137, 250); padding: 0px 16px;" v-show="historyshow">
                    暂无搜索历史
                </van-divider>
            </div>
        </div>
        <!-- 展示搜索商品 -->
        <div v-if="show == false">
            <van-swipe-cell  v-for="(item,index) in goodsList" :key="index">
                <van-cell :border="false" :title="item.name" :value="'商品上架时间:'+item.ctime" />
                <van-button
                    slot="right"
                    square
                    text="删除"
                    type="danger"
                    class="delete-button"
                    @click="removeGood(item.id)"
                />
            </van-swipe-cell>
        </div>
    </div>
</template>
<script>
import { Toast, Dialog } from 'vant';
export default {
    
    data () {
        return {
            value:'',
            historysearch:[],
            goodsList:[],
            show:true,
            historyshow:false,
        };
    },
    methods:{
        // 搜索按下回车键 
         onSearch(){
            if(this.value.trim().length == 0) return Toast.fail('请输入搜索关键词');
            // 获取本地搜索历史
            const weekArray = JSON.parse(localStorage.getItem('historysearch'));
            if(!weekArray){
                // 若无。添加本地存储
                localStorage.setItem('historysearch', JSON.stringify([this.value]));
            }else{
                // 若有，数据添加到数组，在保村
                weekArray.unshift(this.value)
                localStorage.setItem('historysearch', JSON.stringify(weekArray));
            }
            // 获取搜索历史 
            this.gethistory();
            this.show = false;
            // 获取商品搜索列表
            this.getGoodsList();
        },
        // 获取搜索历史 
        gethistory(){
             const history = JSON.parse(localStorage.getItem('historysearch'));
            if(!history){
                this.historyshow = true
            }else{
                this.historyshow = false;
            }
            //  数组去重。并截取前九个
             this.historysearch = [...new Set(history)].slice(0,8);
        },
        // 删除本地搜索历史数据 
        removaLocal(){
            localStorage.removeItem('historysearch');
            this.gethistory();
        },
        // 获取商品搜索列表
        async getGoodsList(){
            const {data:res} = await this.$axios.get('/api/getprodlist');
            res.message.forEach(element => {
               element.ctime = element.ctime.split('T')[0];
            });
            this.goodsList = res.message
        },
        // 取消搜索
        onCancel(){
            this.show = true;
        },
        // 删除搜索商品 
        removeGood(id){
            Dialog.confirm({
                message: '确定删除吗？'
            }).then(async ()=>{
                const {data:res} =await this.$axios.get('/api/delproduct/'+id)
                if(res.status !== 0) return Toast.fail('删除失败');
                Toast.success('删除成功')
                this.onSearch();
            }).catch(()=>{
                Toast.fail('已取消删除');
            });
        },
        // 点击历史记录，赋值给搜索框
        setValue(value){
            this.value = value
        }
    },
    created (){
        this.gethistory()
    },
    mounted (){
    
    },
}
</script>
<style scoped lang="less">
.addgood {
    z-index: 2;
    position: fixed;
    top: 0;
    background-color: transparent;
    height: 40px;
    width: 50px;
    font-size: 14px;
    line-height: 40px;
    color: #fff;}
.search{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    .van-icon{
   
        float: right;
        margin-top: 14px;
    }
}
.van-tag{
    font-size: 12px;
    margin: 0 5px; 
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>